// import HeroDetail from "../pages/HeroDetail/HeroDetail";
// import Hero from "../pages/HeroList/Hero";
import Home from "../pages/Home/Home";
import About from "../pages/About/About";
import News from "../pages/News/News";
import Message from "../pages/Message/Message";
import NotFound from "../pages/NotFound/NotFound";
import {Navigate} from 'react-router-dom';
import Video from "../pages/Video/Video";
import HomePage from "../pages/HomePage/HomePage";
//1. 导入 lazy Suspense 
import {lazy, Suspense} from 'react';
//封装一个函数来简化 lazy 的代码
let lazyLoad = (path) => {
  return lazy(() => {  //lazy 懒得
    return import(path);
  });
}
//2. 懒加载组件   对于lazy的组件, 会进行单独的打包, 最终形成一个独立的资源
let Hero = lazy(() => {  //lazy 懒得
  return import('../pages/HeroList/Hero');
});

let HeroDetail = lazy(() => {  //lazy 懒得
  return import('../pages/HeroDetail/HeroDetail');
});

//封装一个函数 返回 Suspense 包裹的组件
let suspenseCom = (Com) => {
  // 3. 使用 Suspense 包裹懒加载的组件标签
  return <Suspense fallback={<h2>加载中....</h2>}><Com /></Suspense>
}

let arr = [
  {
    path: '/heros',
    element: suspenseCom(Hero)
  },
  {
    path: '/hero',
    element: suspenseCom(HeroDetail)
  },
  {
    path: '/home',
    element: <Home />,
    children: [
      {
        //对于路由的子路由, 设置路径时, 可以不写前面的路径
        path: 'news',
        element: <News />
      },
      {
        // 不要写 ./ 的相对路径, 必须写名称
        path: 'message',
        element: <Message />
      },
      {
        //index 属性必须手动的设置值为 true
        index: true,
        // element: <h2>欢迎来到您的主页</h2>
        element: <Navigate to="/home/news" />
      }
    ]
  },
  {
    path: '/about',
    //区分大小写的配置
    caseSensitive: true,
    element: <About />
  },
  {
    path: '*',
    element: <NotFound />
  },
  //    /video   页面能播放一个视频   http://api.xiaohigh.com/video/random
  {
    path: '/video',
    element: <Video />
  },
  {
    path: '/',
    element: <HomePage />
  }
];

//暴露
export default arr;